<template>
  <div class="guanggao" ref="mycha">
    <div class="table">
      <span class="iconfont icon-cha chacha" @click.stop="fncha()"></span>
      <div class="chatext">美味又好吃!</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    fncha() {
      console.log(this.$refs.mycha, 3333);
      this.$refs.mycha.style.display = "none";
    },
  },
  mounted() {
    document.body.onclick = ()=>{
       this.$refs.mycha.style.display = "block";
    };
  },

  components: {},
};
</script>


<style lang="scss" scoped>
.guanggao {
  width: 687px;
  height: 420px;
  background-image: url("https://st0.dancf.com/gaoding-material/2020-06-07/1591492891-6Jnh8.jpg?x-oss-process=image/resize,w_800/interlace,1,image/format,webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  // background-position: center;
  border-radius: 8px;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: -22px;
  display: none;
}
.table {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto;
  background-color: rgb(230, 213, 213);
  position: absolute;
  top: 3px;
  right: 13px;
}
.chacha {
  font-size: 36px;
  position: relative;
  left: 20px;
  top: 18px;
  color: gray;
}
.chatext {
  position: relative;
  top: 313px;
  right: 58px;
  width: 140px;
  height: 40px;
  font-size: 25px;
  font-weight: bold;
  color: violet;
}
</style>
